<template>
<div class="app-container">
  <el-form :inline="true" :model="form" class="demo-form-inline" >
    <el-form-item label="项目名称">
      <el-input v-model="form.projectName" placeholder="项目名称"></el-input>
    </el-form-item>
    <el-form-item label="客户名称">
      <el-input v-model="form.customerName" placeholder="请输入客户名称"></el-input>
    </el-form-item>
    <el-form-item label="联系人电话">
      <el-input v-model="form.projectTel" placeholder="请输入客户电话"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search" >查询</el-button>
      <el-button  @click="resetList">重置</el-button>
    </el-form-item>
  </el-form>
  <el-card>
    <el-button   v-hasPermi="['module:project:add']" style="margin-bottom: 10px" type="success" size="mini" icon="el-icon-plus" @click="openFn">新增</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column align="center" label="序号" type="index"></el-table-column>
      <el-table-column  align="center" label="客户姓名" prop="customerName"></el-table-column>
      <el-table-column  align="center" label="负责人" prop="userName">

      </el-table-column>
      <el-table-column  align="center" label="项目名" prop="projectName"></el-table-column>
      <el-table-column  align="center" label="项目区域" prop="projectAreaName"></el-table-column>
      <el-table-column  align="center" label="项目信息来源" prop="projectSource"></el-table-column>
      <el-table-column  align="center" label="项目地址" prop="projectAddress"></el-table-column>
      <el-table-column align="center"  label="项目联系人" prop="receiverName"></el-table-column>
      <el-table-column  align="center" label="联系电话" prop="projectTel"></el-table-column>
      <el-table-column  align="center" label="操作" >
        <template slot-scope="scope">
          <el-button v-hasPermi="['module:project:update']"  type="text" @click="editFn(scope.row)">编辑</el-button>
          <el-button  v-hasPermi="['module:project:delete']" type="text" @click="delFn(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pageNum"
      :page-sizes="[10, 15, 20, 25]"
      :page-size="form.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </el-card>
<!--  新增项目-->
  <el-dialog :title="this.form.id?'修项目':'新增项目'" :visible.sync="isShow" width="37%" @close="closeDialog" class="demo-form-inline">
<el-form inline :model="form" :rules="rules" ref="form" label-width="120px">
  <el-form-item label="客户" prop="customerName">
    <el-input style="width: 250px" v-model="form.customerName" readonly placeholder="请选择客户">
      <template slot="append">
        <el-button type="primary" @click="openImportCustomer">
          选择客户
        </el-button>
      </template>
    </el-input>
  </el-form-item>
  <el-form-item label="负责人" prop="userName"><el-input style="width: 250px" v-model="form.userName" placeholder="请选者负责人">
    <template slot="append">
      <el-button type="primary" @click="openImportUser">
        选择负责人
      </el-button>
    </template>
  </el-input></el-form-item>
  <el-form-item label="项目名" prop="projectName"><el-input style="width:250px" v-model="form.projectName" placeholder="请填写项目名"> </el-input></el-form-item>
  <el-form-item label="项目地区域" prop="projectArea">
    <el-select v-model="form.projectArea" placeholder="所属地区">
      <el-option
        v-for="item in regionOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        @click.native="regionChange(item)"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="项目信息来源" prop="projectSource">
    <el-select v-model="form.projectSource" placeholder="项目信息来源">
      <el-option
        v-for="item in projectSourceOptions"
        :key="item.dictValue"
        :label="item.dictLabel"
        :value="item.dictValue"
      ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="项目地址" >
    <el-cascader
    style="width: 300px"
    v-model="form.addressOptions"
    :options="addressOptions"
    :props="optionProps"
    placeholder="请选择收获地址"
    @change="changeFn"
    filterable
  ></el-cascader>
  </el-form-item>
  <el-form-item label="项目详细地址" prop="projectAddress"><el-input  style="width: 300px" v-model="form.projectAddress" ></el-input></el-form-item>
  <el-form-item label="项目联系人" prop="receiverName"><el-input style="width:250px" v-model="form.receiverName" placeholder="请填写项目联系人姓名"> </el-input></el-form-item>
  <el-form-item label="联系人电话" prop="projectTel"><el-input style="width:250px" v-model="form.projectTel" placeholder="请填写项目联系人电话"> </el-input></el-form-item>
</el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
  </el-dialog>
  <import-user ref="import" @showUser="showUser"></import-user>
  <import-customer ref="importCustomer" @showCustomer="showCustomer"></import-customer>
</div>
</template>
<script>
import {ProjectList, getProjectInfo, addProject,editProject,delProject} from '@/api/module/project'
import { provinceNameList } from '@/api/module/region';
import importUser from "@/views/module/customer/user";
import importCustomer from "@/views/module/follow/customer";
import {getDicts} from "@/api/system/dict/data";
import {getLoginUser} from "@/api/system/user";
export default{
  name:"project",
  components:{importUser,importCustomer},
  data(){
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      if (value.length !== 11) {
        callback(new Error('请输入正确电话号码'))
      }
      // 验证电话号码手机号码，包含至今所有号段? ?
      var ab = /^[1][3|4|5|6|7|8|9][0-9]{9}$/
      if (ab.test(value) === false) {
        callback(new Error('请输入正确电话号码'))
      }
      callback()
    }
    return{
           form:{
             pageSize:10,
             pageNum:1,
             customerId:'',
             customerName:'',//客户姓名
             userId:'',//用户id
             userName:'',//用户姓名
             projectName:'',//项目名称
             projectAddress:'',//项目地址
             projectArea:'',//项目区域
             projectAreaName:'',//项目区域名
             projectSource:'',//项目来源
             projectTel:'',//联系人电话
             receiverName:'',//联系人姓名
           },
           total:0,
      user:{},
      rules:{
        projectTel:[{required:true,message:'请输入联系人联系电话',trigger:'blur'},{ validator: validatePhone, trigger: 'blur' }],
        customerName:[{required:true,message:'请输客户姓名',trigger:'blur'}],
        userName:[{required:true,message:'请输入负责名称',trigger:'blur'}],
       projectAddress:[{required:true,message:'请输入项目地址',trigger:'blur'}],
        projectName:[{required:true,message:'请输入项目名',trigger:'blur'}],
        receiverName:[{required:true,message:'请输入联系人姓名',trigger:'blur'}],

      },
      list:[],
      isShow:false,

      optionProps: {
        value: 'label',
        label: 'label',
        children: 'children'
      },
      addressOptions:[],//地址
      regionOptions: [], //地区选择列表
      projectSourceOptions: [], // 项目信息来源
    }
  },
  created(){
    this.initData()
    this.getProjectSourceOptions()
    this.getsponsor()
  },
  methods:{
      async initData(){
        let res=await ProjectList(this.form)
        // console.log(res)
         let arr=res.rows
        arr.forEach(item=>{
          item.projectSource=this.getValue(this.projectSourceOptions,item.projectSource)
        })
        this.list=arr
        this.total=res.total
      },
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },
    //分页
    handleSizeChange(val) {
      this.form.pageSize=val
      this.initData()
    },
    handleCurrentChange(val) {
      this.form.pageNum=val
      this.initData()
    },
    //获取发起人
    getsponsor(){
      getLoginUser(this.queryParams).then(response => {
        this.user = response.user;
      })
    },
  //  c查询按钮
    search(){
        this.initData()
    },
    async resetList(){
        this.form={
          customerId:'',//客户id
          customerName:'',//客户姓名
          userId:'',//用户id
          userName:'',//用户姓名
          projectName:'',//项目名称
          projectAddress:'',//项目地址
          projectArea:'',//项目区域
          projectAreaName:'',//项目区域名
          projectSource:'',//项目来源
          projectTel:'',//联系人电话
          receiverName:'',//联系人姓名
        }
         await this.initData()

    },
    openFn(){
        this.isShow=true
          this.getAreaList()
      this.form.userName=this.user.username
      this.form.userId=this.user.userId
    },
    /** 打开用户弹窗 */
    openImportUser() {
      this.$refs.import.show();
    },
    showUser(data){
      this.form.userName=data.userName
        this.form.userId=data.userId
    },
    /** 打开客户弹窗 */
    openImportCustomer() {
      this.$refs.importCustomer.show();
    },
    showCustomer(data){
      console.log(data)
      this.form.customerId=data.customerId;
      this.form.customerName=data.customerName;
      this.form.projectAddress=data.address
      this.form.projectTel=data.contactTelephone
      this.form.receiverName=data.contactName


      // this.form.customerCategory=data.category;
      // this.form.customerSource=data.source;
      // this.form.customerRegion=data.region;

    },
   async  editFn(val){
    //   获取项目详情
      let res=await getProjectInfo(val.id)
     this.form=res.data
     this.isShow=true
    },
    // 获取项目信息来源
    getProjectSourceOptions() {
      getDicts('biz_project_source').then(response => {
        this.projectSourceOptions = response.data
      })
    },

   async btnOk(){
       try{
         await this.$refs.form.validate()
         if(this.form.id){
           await editProject(this.form)
         }else{
           await addProject(this.form)
         }
         this.isShow=false
         this.$message.success('操作成功')
       }catch(error){
         console.log(error)
       }
    },
    //获取地区选择
    getAreaList() {
      provinceNameList().then(res => {
        this.regionOptions = res.rows;
        let arr = JSON.parse(JSON.stringify(res.rows)) //深拷贝
        /*    arr.forEach(item => {
              item.children.forEach(cItem => delete cItem.children)
            })
            debugger*/
        this.addressOptions = arr
      })
    },
    // 地址选择
    regionChange(value) {
      this.form.projectAreaName=value.label;
      this.form.projectArea=value.value;
    },
    changeFn(value){
      console.log(value)
      if(value && value.length>0){
        this.form.projectAddress=value[0]+value[1]+value[2]
        console.log(value)
        // this.formData.loadingAddressProvince=value[0]
        // this.formData.loadingAddressCity=value[1]
        // this.formData.loadingAddressAre=value[2]

      }

    },
       //弹框关闭
       async closeDialog(){
        this.form={

          customerId: '',
          customerName:'',//客户姓名
          userId:'',//用户id
          userName:'',//用户姓名
          projectName:'',//项目名称
          projectAddress:'',//项目地址
          projectArea:'',//项目区域
          projectAreaName:'',//项目区域名
          projectSource:'',//项目来源
          projectTel:'',//联系人电话
          receiverName:'',//联系人姓名
       }
       await this.initData()
       },
     async delFn(id){
        await this.$confirm('是否确认删除此项目')
        await delProject(id)
         this.$message.success('删除成功')
        await this.initData()
     }


  }


}
</script>
